<template>
  <div class="anhuiMap">
    <Echart
      :options="options"
      id="centerMap"
      ref="centerMap"
      width="100%"
      :style="{ height: heightSet }"
    ></Echart>
    <!-- <mapDialog></mapDialog> -->
  </div>
</template>
    
<script>
import anhui from "@/data/anhui.json";
import Echart from "@/common/echart";
// import mapDialog from "./mapDialog.vue"
export default {
  props: {
    idName: {
      type: String,
      default: "centerMap",
    },
    heightMap: {
      type: String,
      default: "450px",
    },
    zoom: {
      type: Number,
      default: 1.1,
    },
    mapTop: {
      type: String,
      default: "middle", 
    },
    heightSet: {
      default: "450px",
    },
    formatterCustom: {
      type: Function
    },
    data:{
      type: Array,
      default: function(){return []}
    }
  },
  data() {
    let imgUrl = require("../../assets/qjzl/dialogbg.png");
    let that = this;
  
    // console.log(that.data);
    return {
      //   dataList: [
      //     { ename: anhui, name: "安徽" }
      //   ],
      options: {
        
        tooltip: {
              show: true,
              backgroundColor: "rgba(0,0,0,0)",
              borderWidth: "0",
              formatter: function (params) {
                var res = `<div style="min-width:280px;background:url(${imgUrl}) no-repeat;background-size:100% 100%;padding:20px 30px;">
                  <div style="width:100%;margin:0 auto;padding:0 auto;text-align:center;font-size:16px;font-weight:bold;color:#fff;">
                    ${params.name}
                  </div>
                    ${that.formatterCustom(params.data)}
                </div>`;

                return res;
              },
            },
        // 地图的阴影底图
        geo: {
          map: "anhui",
          zoom: this.zoom,
          top: this.mapTop,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
              shadowColor: "rgb(58,115,192)",
              shadowOffsetX: 10,
              shadowOffsetY: 11,
            },
            emphasis: {
              areaColor: "#2AB8FF",
              borderWidth: 0,
              color: "green",
              label: {
                show: false,
              },
            },
          },
        },
        series: [
          {
            type: "map",
            map: "anhui",
            top: this.mapTop,
            // aspectScale: 0.9,
            // layoutCenter: ["50%", "50%"], //地图位置
            // layoutSize: "100%",
            zoom: this.zoom,
            label: {
              normal: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
              },
              emphasis: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
              },
            },
            // tooltip:{} tooltip可结合formatter、div、css实现样式
            itemStyle: {
              normal: {
                 borderColor: "rgba(17, 44, 112, .7)",
                borderWidth: 0.4,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#003ecb", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2bc8ff",
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                shadowColor: "rgba(0, 0, 0, 1)",
                shadowBlur: 10,
                shadowOffsetX: 5,
                shadowOffsetY: 5,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F5B615", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#E27B0d",
                    },
                  ],
                },
              },
            },
            // zlevel: 1,
            data: regionsdata,
          },
        ],
      },
    };
  },
  components: {
    Echart,
    // mapDialog
  },
  created() {
    this.$echarts.registerMap("anhui", anhui);
  },
  methods: {},
  mounted() {
  },
};
</script>
    
<style lang="scss" scoped>
</style>
    